<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-09-24 21:29:56
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-10-09 22:01:38
 * @FilePath: userAdd.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-24 21:29:56
 * @Description: 
-->
<template>
  <div class="userlist">

      <div class="userlist-left">
          <el-button @click="addUser">添加好友</el-button>
          <el-scrollbar>
              <div class="left-list" v-for="(item,index) in list.arr" 
                :class="{'left-list-bg' : active == item.id}" 
                @click="startCall(item.id)" :key="index">
                  <img :src="item.image" class="left-list-img">
                  <span class="left-list-title">{{item.username}}</span>
              </div>
          </el-scrollbar>
      </div>

      <div class="userlist-right">
          <router-view></router-view>
      </div>
  </div>

</template>

<script  lang="ts" setup>
  import { onMounted,reactive,ref } from 'vue/dist/vue.esm-bundler.js'
  import { useRouter } from 'vue-router'


  let list = reactive({arr:[]});
  const active = ref('');
  const router = useRouter();

  const addUser = ()=>{
      router.push({path:'add'})
  }
  import {getFriend} from "../../api/friend";


  const startCall = (uid)=>{
      active.value = uid
      router.push({ path:'chat',query:{uid:uid}})
  }

  /**
   * 获取好友列表
   */
  const getFriendList = async () => {
    getFriend().then(res => {
      list.arr = res.data
    })
  }

  /**
   * 钩子函数
   */
  onMounted(()=>{
    getFriendList()
  })



</script>

<style scoped>
  .userlist{
      display: flex;
      height: 100%;
      width: 100%;
  }
  .userlist-left{
      display: flex;
      flex-direction: column;
      padding-top: 20px;
      padding-left: 10px;
      flex: 1;
      border-right: #dbd6d6 1px solid;
  }
  .userlist-right{
      flex: 4;
  }


  .left-list{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-template-rows:repeat(2,1fr);
      grid-template-areas: 'a b'
      'a b';
      justify-items: center;
      align-items:center;
      margin-top: 10px;
  }
  .left-list-bg{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-template-rows:repeat(2,1fr);
      grid-template-areas: 'a b'
      'a b';
      justify-items: center;
      align-items:center;
      margin-top: 10px;

      background-color: #eaeaea;
  }
  .left-list-img{
      width: 50px;
      height: 50px;
      border-radius: 5px;
      grid-area:a
  }
  .left-list-title{
      grid-area:b
  }

</style>
